<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性111</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaffff;
				/* 背景图属性 */
				background-image: url(img/蜡笔小新.png);
				/* 背景图大于空间--背景图尺寸属性：属性值 ① px % 
													  ② contain 等比例缩放图片
													    cover 等比例放大图片
				*/
				background-size: 30% 30%;
				/* 背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/* 背景图小于空间-->背景定位属性,属性值 x% y%  数值px 数值px  英文 */
				background-position: 20% 0%;
				background-position: 100px 0;
				background-position: center center;
			}
			/* 背景图像固定属性：fixed固定属性-->理解：水印
			 先决条件：1.高度空间足够形成滚动条
					  2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
										  ②等比例缩放图片，保证图片全部显示在容器中
					  3.背景图固定属性：background-attachment：fixed 固定到页面上				  
			 */
			body{
				
				/* 高度：100000px 形成滚动条 */
				height: 100000px;
				/* 滚动模式-->背景图如何滚动 属性background-size */
				background-size: contain;
				/* 引入图 */
				background-image: url("img/蜡笔小新.png");
				background-repeat: no-repeat;
				/* 水印效果：背景图固定 */
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga exercitationem assumenda autem expedita consequatur quod. Recusandae porro, vitae aspernatur repellat quis quae sit illum amet laboriosam, sed ratione, culpa dignissimos?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, voluptate exercitationem ullam ipsam quas pariatur corrupti minus autem amet delectus odio tenetur quos nobis natus nemo totam, consequatur, soluta nesciunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque eveniet nostrum placeat excepturi officiis recusandae illum pariatur cumque commodi iusto cum non, obcaecati deserunt voluptatum harum debitis, aperiam vero numquam!
		<div></div>
	</body>
</html>